﻿@using GlobalResources
@using Newtonsoft.Json;
@using Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Helpers
@model Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Models.ScheduleDeviceMethodModel

@{
    ViewBag.Title = @Strings.InvokeMethod;
    Layout = "~/Views/Shared/_LayoutNoNavigation.cshtml";
}

<header class="header_main">

    <button class="header_main__button_back" type="button" data-bind="click: backButtonClicked"></button>
    <h2 class="header_main__subhead header_main__subhead--large">
        @Strings.InvokeMethod <span class="item__description">
            @{
                if (Model.FilterName == "*")
                {
                    <text>
                        @Strings.AllDevices
                    </text>
                }
                else
                {
                    <text>
                        @Model.FilterName
                    </text>
                }
            }
            <small data-bind="text:getTotalFilterdCount"></small>
        </span>
    </h2>
</header>
<div class="content_outer">

    <div class="content_inner">
        <div id="content">
            <div id="scheduleJobParameter">
                @using (Html.BeginForm("ScheduleDeviceMethod", "Job", FormMethod.Post, new { data_bind = "submit: beforePost" }))
                {
                    @Html.AntiForgeryToken()

                    <fieldset class="edit_form">
                        @{
                            <div>
                                @Html.LabelFor(m => m.JobName, Strings.ScheduleJobName, new { @class = "edit_form__label primary__label" })
                                @Html.TextBoxFor(m => m.JobName, new { placeholder = Strings.ScheduleJobNamePlaceHolder, data_bind = "value: jobName", @class = "edit_form__text" })
                            </div>
                            @Html.HiddenFor(m => m.FilterId)
                            <div style="clear:both"></div>

                            <div class="edit_form__inputGroup">
                                @Html.LabelFor(m => m.MethodName, Strings.InvokeMethodLabel, new { @class = "edit_form__label primary__label" })
                                @Html.TextBoxFor(m => m.MethodName, new { data_bind = "textInput: methodName, event{ blur: $root.updateParameter }", @class = "edit_form__methodComboBox edit_form__text" })
                                <div style="clear:both"></div>
                                <div id="countloadingElement" class="loader_container_half">
                                    <div class="loader_container_half__loader"></div>
                                </div>
                                <div style="clear:both"></div>
                                <div data-bind="ifnot: isLoading">
                                    <a class="edit_form__link" data-bind="click: gotoDeviceList.bind($data,true), text:MatchedDevices" href="javascript:void(0)"></a>
                                </div>
                                <div data-bind="ifnot: isLoading">
                                    <a class="edit_form__link" data-bind="click: gotoDeviceList.bind($data,false),text: UnmatchedDevices" href="javascript:void(0)"></a>
                                </div>
                            </div>

                            <div class="edit_form__inputGroup" data-bind="style:{display: parameters() ?'block':'none' }">
                                <label for="parameterTable" class="edit_form__label primary__label" data-bind="">@Strings.ScheduleParameters</label>
                                <table class="values_editor" id="paramterTable">
                                    <thead>
                                        <tr class="values_editor__groupheader">
                                            <th class="edit_form__labelHeader">@Strings.ScheduleParameterName</th>
                                            <th class="edit_form__labelHeader">@Strings.ScheduleEditValue</th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach:{data: parameters}">
                                        <tr class="values_editor__group">
                                            <td>
                                                <input type="text" class="edit_form__texthalf"
                                                       data-bind='value: ParameterName, attr: { name: "Parameters[" + $index() + "].ParameterName", id: "Parameters" + $index() + ".ParameterName" }' />
                                            </td>
                                            <td>
                                                <input type="text" class="edit_form__texthalf"
                                                       data-bind='value: ParameterValue, attr: { name: "Parameters[" + $index() + "].ParameterValue", id: "Parameters" + $index() + ".ParameterValue" }' />
                                                <input type="hidden" data-bind="value: Type , attr: { name: 'Parameters[' + $index() + '].Type', id: 'Parameters' + $index() + '.Type' } " />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="edit_form__inputGroup">
                                <label for="scheduleJobTime" class="edit_form__label primary__label">@Strings.ScheduleSetJobTime</label>

                                <div id="scheduleJobTime" class="values_editor">
                                    <div class="values_editor__group">
                                        <label class="edit_form__labelHeader">@Strings.StartTime</label>
                                        <div class="input-group" data-bind="dateTimePicker: startDate ,dateTimePickerOptions:{ allowInputToggle : true, widgetPositioning : {horizontal: 'left' ,vertical: 'top'},format: 'LLL' , locale: getCulture()}">
                                            <input type='text' id="StartDate" class="non_float edit_form__text less_margin"
                                                   data-msg-required="*"
                                                   data-rule-required="true" />
                                            <span class="input-group-addon">
                                                <img class="edit_form__datePickerImg" src="/Content/img/expanded.svg">
                                            </span>
                                        </div>
                                        <input type="hidden" id="StartDateHidden" name="StartDateUtc" />
                                    </div>
                                    <div class="values_editor__group">
                                        <label class="edit_form__labelHeader tooltip_header">@Strings.MaxExecutionTime <img src="~/Content/img/icon_info_gray.svg" class="details_grid_info tooltip_icon" title="@Strings.MaximumExecutionTime" /></label>
                                        <input type="text" class="non_float edit_form__textsmall less_margin" name="MaxExecutionTimeInMinutes" data-bind="value: maxExecutionTime"
                                               data-msg-required="*"
                                               data-rule-required="true" />
                                        <span>Mins</span>
                                    </div>
                                </div>
                            </div>
                        }
                    </fieldset>

                    <fieldset class="fieldset_button">
                        <input type="button" class="button_base button_secondary button_cancel" data-bind="click: backButtonClicked" value="@Strings.Cancel" />
                        <button class="button_base" type="submit">@Strings.Schedule</button>
                    </fieldset>
                            }
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    "use strict";

    var resources = {
        redirectToDeviceIndexUrl: '@Url.Action("Index", "Device")',
        redirectToJobIndexUrl: '@Url.Action("Index", "Job")',
        originalJobId: '@Html.JavaScriptString(Model.OriginalJobId)',
        SomeDevicesApplicable: '@Html.JavaScriptString(Strings.SomeDevicesApplicable)',
        SomeDeviceInapplicable: '@Html.JavaScriptString(Strings.SomeDeviceInapplicable)',
        failedToCreateTempFilter: '@Html.JavaScriptString(Strings.FailedToCreateTempFilter)',
        failedToSearchApplicableDevice: '@Html.JavaScriptString(Strings.FailedToSearchApplicableDevice)',
        TotalDeviceString: "@Html.JavaScriptString(Strings.FilteredDeviceCount)",
        LoadingText: "@Html.JavaScriptString(Strings.LoadingText)"
    }
</script>
<script type="text/javascript" src="~/Scripts/Views/Job/ScheduleDeviceMethod.js?ver=@Constants.JSVersion"></script>
<script type="text/javascript">
    $(document).ready(function () {
        IoTApp.ScheduleDeviceMethod.init(@Html.Raw(JsonConvert.SerializeObject(Model)));
    });

</script>

